<template>
  <a-modal
    :title="title"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleOk"
    :width="800"
  >
    <div>

      <a-form :form="form" :label-col="{ span: 5,offset:1 }" :wrapper-col="{ span: 12 }" labelAlign="left">
        <template v-for="item in list">
          <a-form-item :label="item.label">
            {{item.value}}
          </a-form-item>
        </template>
      </a-form>
    </div>
  </a-modal>
</template>

<script>

  import TreeSelect from 'ant-design-vue/es/tree-select'
  export default {
    name: 'mymodal',
    components: { TreeSelect },
    data(){
      return{
        visible:false,
        title:'',
        list:[],
        form: this.$form.createForm(this, { name: 'mymodal' }),
        okfunc:null,
        moreinfo:{},
        ipinput:{},
        ipjson:{},
      }
    },
    methods:{
      resetmodal(){
        this.title = ''
        this.list = []
        this.okfunc = null
      },
      showmodal(modalinfo){
        this.form.resetFields()
        this.resetmodal()
        if(modalinfo){
          this.title = modalinfo.title
          this.list = modalinfo.list
          this.okfunc = modalinfo.ok
          this.moreinfo = modalinfo.moreinfo
        }

        this.visible = true

        setTimeout(()=>{
          for(let i in modalinfo.list){
            if(modalinfo.list[i].value){
              let key = modalinfo.list[i].name
              let val = modalinfo.list[i].value
              let j = {}
              j[key] = val
              this.form.setFieldsValue(j)
            }


          }
        },0)

      },
      handleOk(){
        this.visible = false
      },
    }
  }
</script>

<style lang="less">
  @import "~ant-design-vue/es/tree-select/style/index.less";

  .iplist{
    border: 1px solid #ddd;
    padding: 5px;
    min-height: 100px;
    line-height: 30px;
    div:hover{
      background-color: #efefef;
    }
    .icon{
      color: red;
      cursor: pointer;
      line-height: 30px;
      float: right;
      margin-right: 20px;
    }
  }
</style>